<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style>
			img {
				width: 100px;
				height: 100px;
				border: 2px solid #ccc;
				border-radius: 50%;
				display: block;
				margin: 100px auto;
				/* 调用动画: 动画名称  时长  运动曲线  播放次数*/
				/* infinite 无限循环 */
				animation: run 2s linear infinite;
			}
			/* 定义动画 */
			@keyframes run {
				0% {
					transform: translate(0,0);
				}
				33% {
					transform: translate(400px,0);
				}
				66% {
					transform: translate(200px,400px);
				}
				100% {
					transform: translate(0,0);
				}
			}
			* {
				margin: 0;
				padding: 0;
			}
			li {
				list-style: none;
			}
			.box {
				width: 400px;
				height: 50px;
				line-height: 50px;
				border: 1px solid red;
				margin: 100px;
				/* 溢出隐藏 */
				overflow: hidden;
			}
			/* 定义动画 */
			@keyframes play {
				from {
					transform: translate(0);
				}
				to {
					transform: translate(-840px);
				}
			}
			.box ul {
				display: flex;
				border: 1px solid blue;
				width: 5000px;
				/* 调用动画 */
				animation: play 10s linear infinite;
			}
			/* 鼠标滑过 */
			.box ul:hover {
				/* 暂停播放 */
				animation-play-state: paused;
			}
			.box ul li {
				width: 120px;
			}
		</style>
	</head>
	<body>
		<!-- <img src="kugou/img/avatar.jpg" alt=""> -->
		<div class="box">
			<ul>
				<li>新闻公告1xxxx</li>
				<li>新闻公告2xxx</li>
				<li>新闻公告3xx</li>
				<li>新闻公告4444</li>
				<li>新闻公告5555</li>
				<li>新闻公告6</li>
				<li>新闻公告7</li>
				<li>新闻公告1xxxx</li>
				<li>新闻公告2xxx</li>
				<li>新闻公告3xx</li>
			</ul>
		</div>
	</body>
</html>